<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>账单修改</title>
    <link rel="stylesheet" type="text/css" href="../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../css/iconfont.css" />
    <link rel="stylesheet" type="text/css" href="css/comm.css" />
    <link rel="stylesheet" type="text/css" href="../script/mui/mui.picker.min.css" />
    <link rel="stylesheet" type="text/css" href="../script/mui/mui.reset.css" />
    <link rel="stylesheet" type="text/css" href="../script/vant/index.css" />
    <link rel="stylesheet" type="text/css" href="css/form.css" />
    <link rel="stylesheet" type="text/css" href="css/editStyle.css" />
    <style type="text/css">
        .aui-list .aui-list-item-label-icon {
            padding-right: 0;
        }

        .aui-list .aui-list-item-input label {
            margin-right: 10px;
        }

        .aui-btn-primary {
            background: #01B2F5;
            width: 95%;
            left: 2.5%;
            bottom: 0.5rem;
            border-radius: 5px;
        }

        .aui_formcontent {
            text-align: right;
        }
        .aui-bar-btn{
            width: 120px;
            float: right;
        }
        .aui-bar-btn-item{
            width: 30px;
            height: 22px;
            line-height: 22px;
            min-height: 20px;
            border-color: #e2e5eb;
        }
        /* 弹窗样式 */
.dialog_tishi{
  width: 90%;
  margin: 0 auto;
  padding: 20px 0px;
  text-align: center;
}
.van-dialog__confirm, .van-dialog__confirm:active{
  color: #1a66ff !important;
}
.dialog_item{
  width: 100%;
  font-size: 0.75rem;
  margin-bottom: 20px;
  overflow: hidden;
}
.dialog_item input{
  height: 1.4rem;
  line-height: 1.4rem;
  font-size: 0.75rem;
  text-align: right;
  padding-right: 10px;
}
.edit_win{
  height: 1.6rem;
  line-height: 1.6rem;
}
input::placeholder,textarea::placeholder{
  font-weight: 400;
  color: #ccc !important;
  padding-right: 10px;
}
.dia_item_title{
  width: 35%;
  color: #333;
  text-align: left;
  /* font-weight: 350; */
}
.dia_item_dec{
  font-size: 0.75rem;
  width: 64%;
  text-align: right;
}
.boxmsg{
    background: #f5f5f5;
    border-radius: 6px;
    font-size: 0.65rem;
    color: #999;
    text-align: left;
    padding: 7px;
    margin-bottom: 20px;
}
.tishi{
    font-size: 0.65rem;
    color: #f00;
    text-align: left;
    margin-bottom: 10px;
}
.popup_title {
            position: relative;
            text-align: center;
            line-height: 2.4rem;
            font-size: 0.8rem;
            border-bottom: solid 0.5px #eee;
        }
        .room_content_bottom{
            width: 100%;
            margin: 0 auto;
            height: 2.6rem;
            display: flex;
            padding: 10px 15px;
            justify-content:flex-end;
            border-top: solid 0.5px #eee;
        }
        .winbtn{
            padding: 0px 20px;
            height: 34px;
            margin-left: 10px;
            
        }

    </style>
</head>

<body>
    <div id="app" v-cloak>
        <van-popup v-model="BreakCount.IsEditBreakcount" :style="{ width: '90%' }" round  title="违约金调整" >
            <div class="popup_title">违约金调整</div>
            <div class="dialog_tishi">
                <div class="boxmsg">违约金调整仅对本次收款有效，未完成收款时，会取消变更操作。</div>
                <div class="dialog_item">
                    <div class="dia_item_title fl">当前违约金</div>
                    <div class="dia_item_dec fr" style="padding-right: 10px;">{{BreakCount.OldBreakcount}}</div>
                </div>
                <div class="dialog_item">
                    <div class="dia_item_title fl" style="width: 50%; display: flex; align-items:baseline">变更后违约金<img class="col-star" src="../image/redstar.png"></div>
                    <div class="dia_item_dec fr" style="width: 40%;"> 
                        <van-field v-model="BreakCount.NewBreakcount" type="number" style="border:solid 0.5px #eee; padding-top: 0px;" />
                        <!-- {{BreakCount.NewBreakcount}} -->
                    </div>
                </div>
                <div class="tishi">{{BreakCount.tishi}}</div>
            </div>
            <div class="room_content_bottom">
                <van-button class="winbtn" v-on:click="doClose()" round type="default">取消</van-button>
                <van-button class="winbtn" v-on:click="doSure()" round type="info">确定</van-button>
            </div>
        </van-popup>

        <div class=" boxarea edit">
            <div class="">
                <div class="aui_formitem">
                    <div class="aui_formtitle">收费项目</div>
                    <div class="aui_formcontent">
                        <input :readonly="true" class="choose" style="float: right;" v-model="form.ChargeCategoryName">
                    </div>
                </div>
                <div class="aui_formitem">
                    <div class="aui_formtitle">收费标准</div>
                    <div class="aui_formcontent">
                        <input :readonly="true" class="choose" style="float: right;" v-model="form.Name">
                    </div>
                </div>
                <div class="aui_formitem">
                    <div class="aui_formtitle">账单日期</div>
                    <div class="aui_formcontent">
                        <input :readonly="true" class="choose" style="float: right;" v-model="form.RoomFeeDate">
                    </div>
                </div>
                <div class="aui_formitem">
                    <div class="aui_formtitle">计费周期</div>
                    <div class="aui_formcontent" style="padding-left: 0px;" @click="do_select_time()">
                        {{form.StartTime==''?'--':form.StartTime}} 至 {{form.EndTime==''?'--':form.EndTime}}
                    </div>
                </div>
                <div class="aui_formitem" v-if="form.CanChangeEndTime">
                    <div class="aui_formtitle">月数</div>
                    <div class="aui_formcontent">
                        <div  class="aui-list-item-input aui-bar-list-input" style=" width:100%; padding-left:10%; margin-right:35%;">
                            <div class="aui-bar aui-bar-btn" type="count">
                                <div class="aui-bar-btn-item aui-font-size-20" v-on:click="do_reduce_month()">
                                    <i class="aui-iconfont aui-icon-minus" style="font-size:0.7rem;"></i>
                                </div>
                                <div class="aui-bar-btn-item inputbox">
                                    <input v-model="form.CalMonthNumber" type="number" class="aui-input aui-text-center" readonly="true">
                                </div>
                                <div class="aui-bar-btn-item aui-font-size-20" v-on:click="do_add_month()">
                                    <i class="aui-iconfont aui-icon-plus" style="font-size:0.7rem;"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="aui_formitem">
                    <div class="aui_formtitle">应收金额</div>
                    <div class="aui_formcontent">
                        <input v-if="form.ID>0" :readonly="true" class="choose" style="float: right;" v-model="form.TotalCost">
                        <input v-else class="choose" type="number" style="float: right;" v-model="form.TotalCost">
                    </div>
                </div>
                <div class="aui_formitem">
                    <div class="aui_formtitle ">优惠金额</div>
                    <div class="aui_formcontent" v-on:click="do_open_discount()">
                        <input class="choose" readonly="readonly" type="text" placeholder="点击修改"
                            v-model="form.DiscountCost">
                        <i class="icon iconfont icon-xiangyoujiantou"></i>
                    </div>
                </div>
                <div class="aui_formitem">
                    <div class="aui_formtitle">违约金</div>
                    <div class="aui_formcontent">
                        <input class="choose" :readonly="form.BreakTotalCost<=0" type="number" placeholder="点击修改"
                            v-model="form.BreakTotalCost">
                        <i class="icon iconfont icon-xiangyoujiantou" v-on:click="do_open_Breakcount()"></i>
                        <!-- <input class="choose" type="number" :readonly="form.BreakTotalCost<=0" style="float: right;" placeholder="请填写"
                            v-model="form.BreakTotalCost"> -->
                    </div>
                </div>
                <!-- v-if="form.CanChangeEndTime" -->
               
                
            </div>
        </div>
        <div class="bottom">
            <div class="aui_bottombtn" v-on:click="do_save()">保存</div>
        </div>
    </div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/aui-toast.js"></script>
<script type="text/javascript" src="../script/config.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript" src="../script/aui-dialog.js"></script>
<script type="text/javascript " src="../script/vant/vue.js"></script>
<script type="text/javascript " src="../script/vant/vant.js"></script>
<script type="text/javascript " src="js/chargeroomfee_edit.js"></script>

</html>